<template>
  <div class="outer">
    <h1>App中的Count{{ count }}</h1>
    <h1>App中的数组{{ list }}</h1>

    <button @click="unmountCount">我不想再接受list传递的count数据了</button>
    <list @count="getCount" @list="getItem" ref="list" />
    <Header ref="header" />
  </div>
</template>

<script>
import List from "./components/List";
import Header from "./components/Header";
export default {
  name: "App",
  mounted() {
    //绑定一次性事件
    this.$refs.header.$once("count", (value) => {
      alert(value);
    });
  },
   data() {
    return {
      count: 0,
      list: [],
    };
  },
  components: { List, Header },
  methods: {
    getCount(count) {
      this.count=count
    },
      getItem(item) {
      this.list.push(item);
    },
    message(){
       alert("count改了改了");
    },
    unmountCount(){
       this.$refs.list.$off(["count", "list"]);
    }
  }


};
</script>

<style scoped>
.outer {
  height: 400px;
  background: yellowgreen;
}
</style>